| HTML 中如何将 css 应用于指定某个 块中的 元素？ | 您所在的位置：网站首页 › html select标签 › HTML 中如何将 css 应用于指定某个 块中的 元素？ |
HTML 中如何将 css 应用于指定某个 块中的 元素？
|
需求 以下面的结构进行逐步分析讲解，需求为使第二个超链接显示为紫色背景 标签选择器首先我们看看直接使用标签选择器，体验以下标签选择器的缺点：选择范围太大 Document /* 方式1： */ .box a{background-color: blueviolet;} 超链接1 超链接2 超链接3 超链接4可见4个超链接都被设置了紫色背景颜色  结构伪类选择器然后，我们使用结构伪类选择器，体会nth-child与nth-of-type的区别于联系，注意观察和总结数字序号的算法。 情况1：对于当前的HTML结构，两种是一样的效果nth-child Document .box a:nth-child(2){background-color: blueviolet;} 超链接1 超链接2 超链接3 超链接4nth-of-type Document .box a:nth-of-type(2){background-color: blueviolet;} 超链接1 超链接2 超链接3 超链接4 情况2：当HTML结构变为如下的时候，体会两者的不同
如果想要实现第二个超链接显示紫色背景，  应该这样做 nth-child Document /* 注意此时的序号应该是 3 */ .box a:nth-child(3){background-color: blueviolet;} 这是里面的div 超链接1 超链接2 超链接3 超链接4nth-of-type Document /* 注意此时的序号任然是 2 */ .box a:nth-of-type(2){background-color: blueviolet;} 这是里面的div 超链接1 超链接2 超链接3 超链接4通过以上情况的分析，可以知道两种结构伪类选择器的区别，一定要注意那个序号应该怎么计算。 情况3：当HTML结构变为如下的时候，体会两者的不同如果想要实现第二个超链接显示紫色背景  应该这样做 nth-child Document /* 此时，数字写4 */ .box a:nth-child(4){background-color: blueviolet;} 这是里面的div 超链接1 这是span标签 超链接2 超链接3 超链接4nth-of-type Document /* 此时数字任然写2 */ .box a:nth-of-type(2){background-color: blueviolet;} 这是里面的div 超链接1 这是span标签 超链接2 超链接3 超链接4如果您没看明白，更详细的讲解，请查看我专门写的文章 更多关于CSS选择器的讲解，请看 |
【本文地址】
公司简介
联系我们